.previewImg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  width: 100%;
  height: 100%;

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
  }
  .footer {
    position: absolute;
    bottom: -30px;
    left: 50%;
    width: 100%;
    color: #726464;
    transform: translateX(-50%);
    .current {
      color: #fff;
    }
  }
  .main {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    text-align: center;

    .imgWrapper {
      width: 80%;
      height: 80%;
      display: flex;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .img {
      margin: 0 auto;
      z-index: 2;
      max-width: 100%;
      max-height: 100%;
    }

    .prve {
      position: absolute;
      top: 50%;
      left: -87px;
      z-index: 3;
      width: 47px;
      height: 117px;
      background: url('./images/prve.png') no-repeat center / 100%;
      transform: translateY(-50%);
      cursor: pointer;

      &.disabled {
        cursor: not-allowed;
        opacity: 0.3;
      }
    }

    .next {
      position: absolute;
      top: 50%;
      right: -87px;
      z-index: 3;
      width: 47px;
      height: 117px;
      background: url('./images/next.png') no-repeat center / 100%;
      transform: translateY(-50%);
      cursor: pointer;

      &.disabled {
        cursor: not-allowed;
        opacity: 0.3;
      }
    }

    .close {
      position: absolute;
      top: -20px;
      right: -84px;
      width: 44px;
      height: 44px;
      cursor: pointer;
    }
  }
}
